<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="UPS详情" :isHome="true" :isBack="true"></navigationTop>
		<!-- ups详情 -->
		<view class="main-bg" >
			<!-- 主要内容部分 -->
			<view class="main-contain">
				<!-- 主体白色卡片-开始 -->
				<view class="main-card">
					<!-- 头部圆形图标 -->
					<view class="circle">
						<view :class="[optionData.deviceType=='11'?'ups-sx':'ups-dx', 'ups-icon','is-dot', infoData.deviceStatus=='0'?'':'alarm-dot'+infoData.deviceStatus]" :style="{
							'background-image':'url('+$classNameUrl(optionData.deviceType=='11'?'ups-sx':'ups-dx')+')'
						}"></view>
					</view>
					<!-- 头部标题-开始 -->
					<view class="top-content">
						<view class="mess">
							<u-row align='top' class="top-row">
								<u-col :span="3" class="info-label" text-align="center">名称</u-col>
								<u-col :span="9" class="info-text">{{infoData.deviceName}}</u-col>
							</u-row>
							<u-row align='top' class="top-row"> 
								<u-col :span="3" class="info-label" text-align="center">类型</u-col>
								<u-col :span="9" class="info-text">{{infoData.deviceType}}</u-col>
							</u-row>
						</view>
					</view>
					<!-- 头部标题-结束 -->
					<!-- 中部状态标识内容-开始 -->
					<view class="status-content">
						<text style="margin-bottom:15rpx;">当前状态</text>
						<text :class="'text-level'+infoData.deviceStatus">{{deviceStatus(infoData.deviceStatus)}}</text>
					</view>
					<!-- 中部状态标识内容-结束 -->
					<!-- 内容详情卡片内容盒子-开始 -->
					<view class="msg-content">
						<!-- 内部卡片监测信息 -->
						<view class="card">
							<view class="title">
								<text class="title-text is-dot">输入监测</text>
							</view>
							<u-row v-for="(item,index) in inputData" :key="index" class="uRows">
								<u-col :span="6" class="items" style="padding: 0;">
									<u-row>
										<u-col :span="6" text-align='center' style="padding: 0;"><text class="label">{{item.nameV}}</text></u-col>
										<u-col :span="6" text-align='center'><text :class="['items-text',item.v>1000 ? 'danger-text':'']">{{item.v}}</text></u-col>
									</u-row>
								</u-col>
								<u-col :span="6" class="items" style="padding: 0;">
									<u-row>
										<u-col :span="6" text-align='center' style="padding: 0;"><text class="label">{{item.nameA}}</text></u-col>
										<u-col :span="6" text-align='center'><text :class="['items-text',item.a>1000 ? 'danger-text':'']">{{item.a}}</text></u-col>
									</u-row>
								</u-col>
							</u-row>
						</view>
						<view class="card">
							<view class="title">
								<text class="title-text">输出监测</text>
							</view>
							<u-row v-for="(item,index) in outPutData" :key="index" class="uRows">
								<u-col :span="6" class="items" style="padding: 0;">
									<u-row>
										<u-col :span="6" text-align='center' style="padding: 0;"><text class="label">{{item.nameV}}</text></u-col>
										<u-col :span="6" text-align='center'><text :class="['items-text',item.v>1000 ? 'danger-text':'']">{{item.v}}</text></u-col>
									</u-row>
								</u-col>
								<u-col :span="6" class="items" style="padding: 0;">
									<u-row>
										<u-col :span="6" text-align='center' style="padding: 0;"><text class="label">{{item.nameA}}</text></u-col>
										<u-col :span="6" text-align='center'><text :class="['items-text',item.a>1000 ? 'danger-text':'']">{{item.a}}</text></u-col>
									</u-row>
								</u-col>
							</u-row>
						</view>
						<!-- 卡片最下面旁路监测和电池监测 -->
						<u-row class="last">
							<u-col :span="6" style="padding-left:0;padding-right: 4rpx;">
								<view class="card" style="box-shadow: 0 0 10rpx #999;">
									<view class="title">
										<text class="title-text">旁路监测</text>
									</view>
									<u-row v-for="(item,index) in otherData" :key="index" class="uRows">
										<u-col :span="6" class="items" style="padding: 0;" text-align='center'>
											<text class="label">{{item.nameV}}</text>
										</u-col>
										<u-col :span="6" text-align='center' class="items">
											<text :class="['items-text',item.v>1000 ? 'danger-text':'']">{{item.v}}</text>
										</u-col>
									</u-row>
								</view>
							</u-col>
							<u-col :span="6" style="padding-right:0;padding-left: 4rpx;">
								<view class="card" style="padding-left: 0;padding-right: 0;box-shadow: 0 0 10rpx #999;">
									<view class="title" >
										<text class="title-text">UPS电池监测</text>
									</view>
									<!-- 三相UPS电池监测 -->
									<template v-if="infoData.deviceNum == 11">
										<u-row class="uRows">
											<u-col :span="6" class="items" text-align='center'>
												<text class="label">电池电流</text>
											</u-col>
											<u-col :span="6" text-align='center' class="items">
												<text :class="['items-text',batteryData.a>1000 ? 'danger-text':'']">{{batteryData.a}}</text>
											</u-col>
										</u-row>
										<u-row class="uRows">
											<u-col :span="6" class="items" text-align='center'>
												<text class="label">蓄电池温度</text>
											</u-col>
											<u-col :span="6" text-align='center' class="items">
												<text :class="['items-text',batteryData.temperature>1000 ? 'danger-text':'']">{{batteryData.temperature}}</text>
											</u-col>
										</u-row>
										<u-row class="uRows">
											<u-col :span="7" class="items" style="padding:0 0 0 4rpx;" text-align='center'>
												<text class="label">电池剩余时间</text>
											</u-col>
											<u-col :span="5" text-align='center' style="padding: 0;" class="items">
												<text :class="['items-text',batteryData.remainingTime<60 ? 'danger-text':'']">{{batteryData.remainingTime}}</text>
											</u-col>
										</u-row>
									</template>
									<!-- 单相UPS电池监测 -->
									<template v-if="infoData.deviceNum == 22">
										<u-row class="uRows">
											<u-col :span="7" class="items" text-align='center'>
												<text class="label">蓄电池组电压</text>
											</u-col>
											<u-col :span="5" text-align='center' class="items">
												<text :class="['items-text',batteryData.a>1000 ? 'danger-text':'']">{{singleBatteryData.v}}</text>
											</u-col>
										</u-row>
										<u-row class="uRows">
											<u-col :span="7" class="items" text-align='center'>
												<text class="label">系统电池电流</text>
											</u-col>
											<u-col :span="5" text-align='center' class="items">
												<text :class="['items-text',batteryData.a>1000 ? 'danger-text':'']">{{singleBatteryData.a}}</text>
											</u-col>
										</u-row>
										<u-row class="uRows" style="opacity: 0;">
											<u-col :span="7" class="items" text-align='center'>
												<text class="label">系统电池电流</text>
											</u-col>
											<u-col :span="5" text-align='center' class="items">
												<text :class="['items-text',batteryData.a>1000 ? 'danger-text':'']">{{singleBatteryData.a}}</text>
											</u-col>
										</u-row>
									</template>
								</view>
							</u-col>
						</u-row>
					</view>
					<!-- 内容详情卡片内容盒子-结束 -->
				</view>
				<!-- 主体白色卡片-结束 -->
				<!-- 底部swiper-开始 -->
				<view class="tabs-content">
					<!-- tabs组件 -->
					<navTab :tabList="tabList" @changeIndex="changeNav" style="margin-bottom: 30rpx;"></navTab>
				</view>
				<!-- 轮播盒子 -->
					<view style="height: 560rpx;">
						<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
					</view>
				<!-- 轮播结束 -->
			</view>
		</view>
	</view>
</template>

<script>
	import navTab from '@/components/navTab/navTab.vue';
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import {chooseAlarmLevel,handleSwiperGroup,alarmTabs} from "@/common/utils/index.js";
	import navigationTop from "@/components/navigationTop/index.vue";
	export default{
		components:{navTab,AlarmSwiper,navigationTop},
		data(){
			return{
				optionData:{},
				infoData:{
					deviceName:"",
					deviceType:"",
					deviceStatus:""
				},
				navCurrent:'0', //tab 栏的index
				refreshSwiper:true, //是否重置swiper
				swiperGroup:{}, //swiper组
				swiperData:[], //展示的swiper数组
				tabList:alarmTabs(),
				current:0, //swiper页码
				inputData:[],//输入监测
				outPutData:[],//输出监测
				otherData:[],//旁路监测
				batteryData:{ 
					a:"",
					temperature:0,
					remainingTime:0
				},//三相电池监测
				singleBatteryData:{
					v:"",
					a:""
				},//单相电池监测
				alarmSwiper:[] //告警swiper数组
			}
		},
		onLoad(options){
			this.optionData = {
				...options
			}
			// console.log(this.optionData)
			this.getData(options)
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods:{
			changeNav(val){
				this.refreshSwiper = false;
				this.navCurrent = val
				this.swiperData = this.swiperGroup[this.navCurrent];
				this.$nextTick(()=>{
					this.refreshSwiper = true
				})
			},
			// 设置中间数据
			setMidData(data){
				switch (data.deviceNum){
					case "11": // 三相 UPS
						// 输入模块数据
						this.inputData.push({
							v:data.inputVoltageUa + 'V',a:data.inputElectricityIa + 'A',nameV:"A相电压Ua",nameA:"A相电流Ia"
						})
						this.inputData.push({
							v:data.inputVoltageUb + 'V',a:data.inputElectricityIb + 'A',nameV:"B相电压Ub",nameA:"B相电流Ib"
						})
						this.inputData.push({
							v:data.inputVoltageUc + 'V',a:data.inputElectricityIc + 'A',nameV:"C相电压Uc",nameA:"C相电流Ic"
						})
						// 输出模块数据
						this.outPutData.push({
							v:data.outputVoltageUa + 'V',a:data.outputElectricityIa + 'A',nameV:"A相电压Ua",nameA:"A相电流Ia"
						})
						this.outPutData.push({
							v:data.outputVoltageUb + 'V',a:data.outputElectricityIb + 'A',nameV:"B相电压Ub",nameA:"B相电流Ib"
						})
						this.outPutData.push({
							v:data.outputVoltageUc + 'V',a:data.outputElectricityIc + 'A',nameV:"C相电压Uc",nameA:"C相电流Ic"
						})
						// 旁路模块数据
						this.otherData.push({
							v:data.aVoltageBypass + 'V',nameV:"A相电压Ua"
						})
						this.otherData.push({
							v:data.bVoltageBypass + 'V',nameV:"B相电压Ub"
						})
						this.otherData.push({
							v:data.cVoltageBypass + 'V',nameV:"C相电压Uc"
						})
						// 电池监测模块
						this.batteryData.a = data.cellElectricityBoth + ' A'
						this.batteryData.temperature = data.cellTemperature + ' ℃'
						this.batteryData.remainingTime = data.cellResidueTime + ' 分'
						break;
					case "22": // 单相 UPS
						// 输入模块数据
						this.inputData.push({
							v:data.inputVoltage + ' V',a:data.inputElectricity + ' A',nameV:"电压",nameA:"电流"
						})
						this.inputData.push({
							v:data.inputFrequency + ' HZ',nameV:"频率"
						})
						// 输出模块数据
						this.outPutData.push({
							v:data.outputFrequency + ' V',a:data.outputElectricity + ' A',nameV:"电压",nameA:"电流"
						})
						this.outPutData.push({
							v:data.outputEnergy + ' KW/H',a:data.outputPower + ' KV/A',nameV:"正向有功电能",nameA:"A相视在功率"
						})
						this.outPutData.push({
							v:data.outputVoltage + ' HZ',nameV:"频率"
						})
						// 旁路模块数据
						this.otherData.push({
							v:data.iaVoltageBypass + ' A',nameV:"A相电流Ia"
						})
						this.otherData.push({
							v:data.uaVoltageBypass + ' V',nameV:"A相电压Ua"
						})
						this.otherData.push({
							v:data.frequencyBypass + ' HZ',nameV:"旁路频率"
						})
						// 电池监测模块
						this.singleBatteryData.a = data.cellElectricity + ' A'
						this.singleBatteryData.v = data.cellVoltage + ' V'
						break;
					default:
						break;
				}
			},
			getData(data){
				uni.showLoading({
				    title: '加载中',
						mask: false
				});
				this.$http.httpRequest({
					url:this.$api.deviceDetails,
					methods:"get",
					data:data
				}).then((res)=>{
					uni.hideLoading()
					if(!res){
						return uni.showToast({
							title:"服务器请求异常",
							icon:"none"
						})
					}
					this.infoData = {
						...this.infoData,
						...res.data.deviceDetails
					}
					// 设置中间部分数据
					this.setMidData(this.infoData)
					// 给tab栏赋值
					this.handleTab_Swiper(res)
				}).catch((err)=>{
					uni.hideLoading()
				})
			},
			swiperChange(e){
				this.current = e.target.current
			},
			handleTab_Swiper(res){
				// 给tab栏赋值
				this.tabList.forEach((item)=>{
					res.data.alarmCount.forEach((its)=>{
						if(item.alarmLevel == its.alarmLevel){
							item['count'] = its.r1
							// item['count'] = 5
						}
					})
				})
				const swiperData = res.data.alarmList;
				const group = {
					"0":[],
					"1":[],
					"2":[],
					"3":[],
					"4":[]
				}
				const swipers = handleSwiperGroup(group,swiperData,'alarmLevel');
				this.swiperGroup = swipers;
				this.swiperData = this.swiperGroup[this.navCurrent];
			}
		},
		mounted() {
		}
	}
</script>

<style scoped lang="scss">
	$info-label: #919297;
	.contain-main-box{
		.main-bg{
			background-color: $main-bg-bgColor;
			.main-contain{
				padding-top: 80rpx;
				.is-dot::after{
					content: ' ';
					display: block;
					width: 24rpx;
					height: 24rpx;
					// background-color: $dangerColor;
					border-radius: 50%;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%,-50%);
				}
				.alarm-dot0::after{
					background-color: $level0;
				}
				.alarm-dot1::after{
					background-color: $level1;
				}
				.alarm-dot2::after{
					background-color: $level2;
				}
				.alarm-dot3::after{
					background-color: $level3;
				}
				.alarm-dot4::after{
					background-color: $level4;
				}
				.main-card{
					width: $baseWidth;
					margin: 0 auto 60rpx auto;
					border-radius: $card-box-radius;
					background-color: rgba(255, 255, 255, 0.88);
					padding: 40rpx 22rpx;
					box-shadow: $card-box-shadow;
					position: relative;
					.circle{
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						box-shadow: $card-box-shadow;
						background-color: #FFFFFF;
						position: absolute;
						top: 0;
						left: 32rpx;
						transform: translateY(-55rpx);
						z-index: 20;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						.ups-icon{
							// width: 100%;
							width: 60rpx;
							height: 63rpx;
							// background-image: url(../../static/icon/ups.png);
							background-size: contain;
							background-repeat: no-repeat;
							position: relative;
							background-position: 50%;
						}
					}
					.top-content{
						width: 100%;
						height: 70rpx;
						position: relative;
						margin-bottom: 40rpx;
						.mess{
							// width: 315rpx;
							padding-left: 192rpx;
							.top-row{
								margin-bottom: 20rpx;
								.info-label,
								.info-text {
									font-size: 28rpx;
								}
								.info-label {
									color: $info-label;
								}
								.info-text{
									color: $ky-main-color;
								}
							}
						}
					}
					.status-content{
						text-align: center;
						margin-bottom: 45rpx;
						text{
							display: block;
							font-size: 26rpx;
						}
						.abnormal{
							color: $dangerColor;
							font-size: 31rpx;
							margin-top: 14rpx;
						}
					}
					.msg-content{
						.last{
							// align-items: normal !important;
						}
						.card{
							border-radius: 30rpx;
							padding: 18rpx 18rpx 36rpx 18rpx;
							background-color: #fff;
							box-shadow: 0 0 20rpx #999;
							margin-bottom: 21rpx;
							.title{
								text-align: center;
								margin-bottom: 38rpx;
								.title-text{
									display: inline-block;
									position: relative;
									color: $ky-main-color;
									font-size: 26rpx;
									z-index: 23;
								}
							}
							.uRows{
								margin-bottom: 22rpx;
								&:last-child{
									margin-bottom: 0;
								}
								.items{
									color: $ky-main-color;
									.label{
										color: $info-label;
										font-size: 24rpx;
									}
									.items-text{
										font-size: 26rpx;
									}
									.danger-text{
										color: $dangerColor;
									}
								}
							}
						}
					}
				}
				// swiper内容
				.tabs-content{
					width: $baseWidth;
					margin: 0 auto;
				}
				.swiper-box{
					height: 560rpx;
					position: relative;
					.swiper{
						height: 100%;
						.swiper-item{
							width: 560rpx;
							min-height: 360rpx;
							margin: 60rpx auto 0rpx auto;
							border-radius: 30rpx;
							box-shadow: 0 0 10rpx #999;
							transition: transform 0.3s;
							padding: 64rpx 0;
							.swiper-row{
								margin-bottom: 40rpx;
								&:last-child{
									margin-bottom: 0;
								}
							}
							.label{
								color: $info-label;
								font-size: 26rpx;
							}
							.alarm-text{
								color: $dangerColor;
								font-size: 26rpx;
								padding-right: 20rpx;
							}
							.alarmMsg{
								width: 100%;
								// display: flex;
								max-height: 150rpx;
								overflow: hidden;
							}
						}
						.swiperActive{
							// width: 666rpx;
							// height: 420rpx;
							transform: scale(1.1);
						}
					}
					.page-content{
						position: absolute;
						right: 90rpx;
						bottom: 60rpx;
						z-index: 60;
						padding: 8rpx 15rpx;
						background-color: rgba(0,0,0,0.5);
						color: #FFFFFF;
						border-radius: 50%;
					}
					.noData{
						text-align: center;
						color: #999;
						font-size: 25rpx;
						padding-top: 30rpx;
					}
				}
			}
		}
	}
</style>
